<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品管理指南</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="mx-auto max-w-[393px] h-[852px] bg-white relative overflow-hidden rounded-[40px] shadow-2xl">
        <!-- Status Bar -->
        <div class="bg-white px-6 pt-3 pb-2">
            <div class="flex justify-between items-center text-xs">
                <span class="font-semibold">9:41</span>
                <div class="flex space-x-1">
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>
        </div>

        <!-- Header -->
        <div class="bg-gradient-to-r from-green-600 to-emerald-600 px-4 py-3">
            <div class="flex items-center justify-between text-white">
                <a href="b2b-help-center.html" class="text-white">
                    <i class="fas fa-arrow-left text-lg"></i>
                </a>
                <h1 class="text-lg font-semibold">商品管理指南</h1>
                <button onclick="searchGuide()" class="text-white hover:opacity-80">
                    <i class="fas fa-search text-lg"></i>
                </button>
            </div>
        </div>

        <!-- Guide Header Card -->
        <div class="px-4 py-3 bg-gradient-to-r from-green-600 to-emerald-600">
            <div class="bg-white/10 backdrop-blur-sm rounded-xl p-4">
                <div class="flex items-center text-white">
                    <div class="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center mr-3">
                        <i class="fas fa-box text-xl"></i>
                    </div>
                    <div class="flex-1">
                        <h3 class="font-bold text-lg">商品上架发布指南</h3>
                        <p class="text-sm opacity-90 mt-1">从零开始，快速掌握商品管理技巧</p>
                    </div>
                    <div class="text-right">
                        <p class="text-xs opacity-80">预计时长</p>
                        <p class="text-lg font-semibold">15分钟</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Scrollable Content -->
        <div class="h-[calc(852px-220px)] overflow-y-auto pb-24">
            <!-- Quick Steps -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-green-600 mr-2 rounded-full"></span>
                    快速上手
                </h3>
                <div class="grid grid-cols-2 gap-3">
                    <button onclick="openStep('step1')" class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl p-4 text-center border border-blue-200 hover:border-blue-400 transition-all">
                        <div class="w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center mx-auto mb-2 text-sm font-bold">1</div>
                        <p class="text-sm font-medium">商品信息</p>
                        <p class="text-xs text-gray-600 mt-1">基本信息填写</p>
                    </button>
                    <button onclick="openStep('step2')" class="bg-gradient-to-br from-green-50 to-green-100 rounded-xl p-4 text-center border border-green-200 hover:border-green-400 transition-all">
                        <div class="w-8 h-8 bg-green-600 text-white rounded-full flex items-center justify-center mx-auto mb-2 text-sm font-bold">2</div>
                        <p class="text-sm font-medium">图片上传</p>
                        <p class="text-xs text-gray-600 mt-1">主图和详情图</p>
                    </button>
                    <button onclick="openStep('step3')" class="bg-gradient-to-br from-orange-50 to-orange-100 rounded-xl p-4 text-center border border-orange-200 hover:border-orange-400 transition-all">
                        <div class="w-8 h-8 bg-orange-600 text-white rounded-full flex items-center justify-center mx-auto mb-2 text-sm font-bold">3</div>
                        <p class="text-sm font-medium">价格设置</p>
                        <p class="text-xs text-gray-600 mt-1">定价策略</p>
                    </button>
                    <button onclick="openStep('step4')" class="bg-gradient-to-br from-purple-50 to-purple-100 rounded-xl p-4 text-center border border-purple-200 hover:border-purple-400 transition-all">
                        <div class="w-8 h-8 bg-purple-600 text-white rounded-full flex items-center justify-center mx-auto mb-2 text-sm font-bold">4</div>
                        <p class="text-sm font-medium">库存管理</p>
                        <p class="text-xs text-gray-600 mt-1">库存设置</p>
                    </button>
                </div>
            </div>

            <!-- Detailed Guide -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-green-600 mr-2 rounded-full"></span>
                    详细步骤
                </h3>
                <div class="space-y-4">
                    <!-- Step 1 -->
                    <div class="guide-step bg-white rounded-xl border border-gray-200 overflow-hidden" id="step1">
                        <div class="bg-blue-50 p-3 border-b border-blue-100">
                            <div class="flex items-center">
                                <div class="w-6 h-6 bg-blue-600 text-white rounded-full flex items-center justify-center mr-3 text-xs font-bold">1</div>
                                <h4 class="font-medium text-blue-800">填写商品基本信息</h4>
                            </div>
                        </div>
                        <div class="p-4">
                            <div class="space-y-3">
                                <div class="flex items-start">
                                    <i class="fas fa-tag text-blue-600 mt-1 mr-3"></i>
                                    <div>
                                        <p class="text-sm font-medium mb-1">商品标题</p>
                                        <p class="text-xs text-gray-600">标题应简洁明了，包含核心关键词，建议30-60字符</p>
                                        <div class="bg-gray-50 rounded p-2 mt-1">
                                            <p class="text-xs text-gray-700">示例：iPhone 15 Pro Max 1TB 天然钛金色 5G手机</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="flex items-start">
                                    <i class="fas fa-list text-green-600 mt-1 mr-3"></i>
                                    <div>
                                        <p class="text-sm font-medium mb-1">商品分类</p>
                                        <p class="text-xs text-gray-600">选择准确的分类有助于买家发现您的商品</p>
                                    </div>
                                </div>
                                <div class="flex items-start">
                                    <i class="fas fa-align-left text-orange-600 mt-1 mr-3"></i>
                                    <div>
                                        <p class="text-sm font-medium mb-1">商品描述</p>
                                        <p class="text-xs text-gray-600">详细描述商品特点、规格、使用方法等</p>
                                    </div>
                                </div>
                            </div>
                            <button onclick="nextStep(2)" class="w-full bg-blue-50 text-blue-600 text-sm py-2 rounded-lg mt-3 hover:bg-blue-100 transition-colors">
                                下一步：上传图片
                            </button>
                        </div>
                    </div>

                    <!-- Step 2 -->
                    <div class="guide-step bg-white rounded-xl border border-gray-200 overflow-hidden" id="step2">
                        <div class="bg-green-50 p-3 border-b border-green-100">
                            <div class="flex items-center">
                                <div class="w-6 h-6 bg-green-600 text-white rounded-full flex items-center justify-center mr-3 text-xs font-bold">2</div>
                                <h4 class="font-medium text-green-800">上传商品图片</h4>
                            </div>
                        </div>
                        <div class="p-4">
                            <div class="space-y-3">
                                <div class="flex items-start">
                                    <i class="fas fa-image text-blue-600 mt-1 mr-3"></i>
                                    <div>
                                        <p class="text-sm font-medium mb-1">主图要求</p>
                                        <ul class="text-xs text-gray-600 space-y-1">
                                            <li>• 尺寸：800x800px 或更高</li>
                                            <li>• 格式：JPG、PNG</li>
                                            <li>• 大小：不超过2MB</li>
                                            <li>• 建议上传5-9张不同角度的图片</li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="flex items-start">
                                    <i class="fas fa-file-image text-green-600 mt-1 mr-3"></i>
                                    <div>
                                        <p class="text-sm font-medium mb-1">详情图</p>
                                        <p class="text-xs text-gray-600">展示商品细节、使用场景、规格参数等</p>
                                    </div>
                                </div>
                                <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-3">
                                    <div class="flex items-start">
                                        <i class="fas fa-lightbulb text-yellow-600 mt-1 mr-2"></i>
                                        <div>
                                            <p class="text-xs font-medium text-yellow-800 mb-1">拍摄技巧</p>
                                            <p class="text-xs text-yellow-700">使用自然光，背景简洁，多角度展示</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <button onclick="nextStep(3)" class="w-full bg-green-50 text-green-600 text-sm py-2 rounded-lg mt-3 hover:bg-green-100 transition-colors">
                                下一步：设置价格
                            </button>
                        </div>
                    </div>

                    <!-- Step 3 -->
                    <div class="guide-step bg-white rounded-xl border border-gray-200 overflow-hidden" id="step3">
                        <div class="bg-orange-50 p-3 border-b border-orange-100">
                            <div class="flex items-center">
                                <div class="w-6 h-6 bg-orange-600 text-white rounded-full flex items-center justify-center mr-3 text-xs font-bold">3</div>
                                <h4 class="font-medium text-orange-800">设置商品价格</h4>
                            </div>
                        </div>
                        <div class="p-4">
                            <div class="space-y-3">
                                <div class="flex items-start">
                                    <i class="fas fa-dollar-sign text-red-600 mt-1 mr-3"></i>
                                    <div>
                                        <p class="text-sm font-medium mb-1">销售价格</p>
                                        <p class="text-xs text-gray-600">考虑成本、市场价格、竞争对手定价</p>
                                    </div>
                                </div>
                                <div class="flex items-start">
                                    <i class="fas fa-percentage text-green-600 mt-1 mr-3"></i>
                                    <div>
                                        <p class="text-sm font-medium mb-1">优惠设置</p>
                                        <ul class="text-xs text-gray-600 space-y-1">
                                            <li>• 限时折扣</li>
                                            <li>• 满减优惠</li>
                                            <li>• 会员专享价</li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="bg-blue-50 border border-blue-200 rounded-lg p-3">
                                    <div class="flex items-start">
                                        <i class="fas fa-chart-line text-blue-600 mt-1 mr-2"></i>
                                        <div>
                                            <p class="text-xs font-medium text-blue-800 mb-1">定价建议</p>
                                            <p class="text-xs text-blue-700">参考平台价格分析工具，设置合理价格</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <button onclick="nextStep(4)" class="w-full bg-orange-50 text-orange-600 text-sm py-2 rounded-lg mt-3 hover:bg-orange-100 transition-colors">
                                下一步：库存管理
                            </button>
                        </div>
                    </div>

                    <!-- Step 4 -->
                    <div class="guide-step bg-white rounded-xl border border-gray-200 overflow-hidden" id="step4">
                        <div class="bg-purple-50 p-3 border-b border-purple-100">
                            <div class="flex items-center">
                                <div class="w-6 h-6 bg-purple-600 text-white rounded-full flex items-center justify-center mr-3 text-xs font-bold">4</div>
                                <h4 class="font-medium text-purple-800">设置库存管理</h4>
                            </div>
                        </div>
                        <div class="p-4">
                            <div class="space-y-3">
                                <div class="flex items-start">
                                    <i class="fas fa-boxes text-blue-600 mt-1 mr-3"></i>
                                    <div>
                                        <p class="text-sm font-medium mb-1">库存数量</p>
                                        <p class="text-xs text-gray-600">设置准确的库存数量，避免超卖</p>
                                    </div>
                                </div>
                                <div class="flex items-start">
                                    <i class="fas fa-bell text-orange-600 mt-1 mr-3"></i>
                                    <div>
                                        <p class="text-sm font-medium mb-1">库存预警</p>
                                        <p class="text-xs text-gray-600">设置低库存提醒，及时补货</p>
                                    </div>
                                </div>
                                <div class="flex items-start">
                                    <i class="fas fa-cog text-purple-600 mt-1 mr-3"></i>
                                    <div>
                                        <p class="text-sm font-medium mb-1">SKU管理</p>
                                        <p class="text-xs text-gray-600">为不同规格、颜色设置独立SKU</p>
                                    </div>
                                </div>
                            </div>
                            <button onclick="completeGuide()" class="w-full bg-purple-50 text-purple-600 text-sm py-2 rounded-lg mt-3 hover:bg-purple-100 transition-colors">
                                完成指南学习
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Common Issues -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-green-600 mr-2 rounded-full"></span>
                    常见问题
                </h3>
                <div class="space-y-3">
                    <div class="bg-white rounded-lg border border-gray-200 p-3">
                        <div class="flex items-start">
                            <i class="fas fa-question-circle text-blue-600 mt-1 mr-3"></i>
                            <div class="flex-1">
                                <p class="text-sm font-medium mb-1">为什么我的商品不显示？</p>
                                <p class="text-xs text-gray-600">可能原因：信息不完整、图片不符合要求、分类错误</p>
                                <button onclick="viewSolution('visibility')" class="text-blue-600 text-xs mt-1 hover:underline">查看解决方案</button>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-white rounded-lg border border-gray-200 p-3">
                        <div class="flex items-start">
                            <i class="fas fa-question-circle text-green-600 mt-1 mr-3"></i>
                            <div class="flex-1">
                                <p class="text-sm font-medium mb-1">如何提高商品排名？</p>
                                <p class="text-xs text-gray-600">优化标题关键词、完善商品信息、提高销量和评价</p>
                                <button onclick="viewSolution('ranking')" class="text-green-600 text-xs mt-1 hover:underline">查看详细方法</button>
                            </div>
                        </div>
                    </div>

                    <div class="bg-white rounded-lg border border-gray-200 p-3">
                        <div class="flex items-start">
                            <i class="fas fa-question-circle text-orange-600 mt-1 mr-3"></i>
                            <div class="flex-1">
                                <p class="text-sm font-medium mb-1">批量管理商品的方法？</p>
                                <p class="text-xs text-gray-600">使用批量编辑工具、Excel导入功能</p>
                                <button onclick="viewSolution('batch')" class="text-orange-600 text-xs mt-1 hover:underline">了解批量工具</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Related Resources -->
            <div class="p-4 pb-8">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-green-600 mr-2 rounded-full"></span>
                    相关资源
                </h3>
                <div class="grid grid-cols-2 gap-3">
                    <button onclick="openResource('video')" class="bg-white rounded-lg border border-gray-200 p-3 text-center hover:bg-gray-50 transition-colors">
                        <i class="fas fa-play-circle text-red-600 text-lg mb-2"></i>
                        <p class="text-sm font-medium">视频教程</p>
                        <p class="text-xs text-gray-500 mt-1">观看实操演示</p>
                    </button>
                    <button onclick="openResource('template')" class="bg-white rounded-lg border border-gray-200 p-3 text-center hover:bg-gray-50 transition-colors">
                        <i class="fas fa-file-excel text-green-600 text-lg mb-2"></i>
                        <p class="text-sm font-medium">导入模板</p>
                        <p class="text-xs text-gray-500 mt-1">下载批量模板</p>
                    </button>
                    <button onclick="openResource('examples')" class="bg-white rounded-lg border border-gray-200 p-3 text-center hover:bg-gray-50 transition-colors">
                        <i class="fas fa-star text-yellow-600 text-lg mb-2"></i>
                        <p class="text-sm font-medium">优秀案例</p>
                        <p class="text-xs text-gray-500 mt-1">学习最佳实践</p>
                    </button>
                    <button onclick="openResource('tools')" class="bg-white rounded-lg border border-gray-200 p-3 text-center hover:bg-gray-50 transition-colors">
                        <i class="fas fa-tools text-blue-600 text-lg mb-2"></i>
                        <p class="text-sm font-medium">辅助工具</p>
                        <p class="text-xs text-gray-500 mt-1">提效小工具</p>
                    </button>
                </div>
            </div>
        </div>

        <!-- Bottom Action Bar -->
        <div class="absolute bottom-1 left-0 right-0 bg-white border-t border-gray-200 px-4 py-3 shadow-lg">
            <div class="flex space-x-3">
                <button onclick="startPractice()" class="flex-1 bg-green-600 text-white font-medium py-2.5 rounded-lg hover:bg-green-700 transition-colors">
                    <i class="fas fa-plus mr-2"></i>立即实践
                </button>
                <button onclick="bookmarkGuide()" class="bg-gray-100 text-gray-700 font-medium px-4 py-2.5 rounded-lg hover:bg-gray-200 transition-colors">
                    <i class="fas fa-bookmark"></i>
                </button>
            </div>
        </div>
    </div>

    <script>
        let currentStep = 1;

        // Search guide
        function searchGuide() {
            const keyword = prompt('请输入搜索关键词：');
            if (keyword) {
                showToast(`正在搜索"${keyword}"相关内容...`);
            }
        }

        // Open specific step
        function openStep(stepId) {
            const stepNumber = parseInt(stepId.replace('step', ''));
            const stepElement = document.getElementById(stepId);
            
            if (stepElement) {
                stepElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
                showToast(`跳转到第${stepNumber}步`);
            }
        }

        // Next step
        function nextStep(stepNumber) {
            currentStep = stepNumber;
            const nextStepElement = document.getElementById(`step${stepNumber}`);
            
            if (nextStepElement) {
                nextStepElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
                showToast(`进入第${stepNumber}步`);
            }
        }

        // Complete guide
        function completeGuide() {
            if (confirm('恭喜完成商品管理指南学习！\n\n是否立即创建商品？')) {
                startPractice();
            } else {
                showToast('学习完成！可随时回顾指南内容');
            }
        }

        // View solution
        function viewSolution(type) {
            const solutions = {
                'visibility': 'b2b-solution-visibility.html',
                'ranking': 'b2b-solution-ranking.html',
                'batch': 'b2b-solution-batch.html'
            };
            
            if (solutions[type]) {
                window.location.href = solutions[type];
            } else {
                showToast('正在加载解决方案...');
            }
        }

        // Open resource
        function openResource(type) {
            const resources = {
                'video': 'b2b-video-tutorials.html',
                'template': 'b2b-download-template.html',
                'examples': 'b2b-best-examples.html',
                'tools': 'b2b-helper-tools.html'
            };
            
            if (resources[type]) {
                window.location.href = resources[type];
            } else {
                showToast('正在加载资源...');
            }
        }

        // Start practice
        function startPractice() {
            if (confirm('即将跳转到商品发布页面\n\n您可以按照指南步骤实际操作')) {
                window.location.href = 'b2b-create-product.html';
            }
        }

        // Bookmark guide
        function bookmarkGuide() {
            showToast('已收藏到我的指南');
        }

        // Toast notification
        function showToast(message) {
            const toast = document.createElement('div');
            toast.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-lg text-sm z-50';
            toast.textContent = message;
            document.body.appendChild(toast);
            
            setTimeout(() => {
                toast.remove();
            }, 2000);
        }

        // Initialize page
        document.addEventListener('DOMContentLoaded', function() {
            showToast('商品管理指南已加载');
        });
    </script>
</body>
</html>